<template>
    <div class="particulars">
        <div class="particulars-top">
            <div>
                <img src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg" />
            </div>
            <div style="margin-left: 30px;">
                <p><span>离职</span></p>
                <p style="margin: 20px 0;">入职时间：最新工资：</p>
                <p>当月基本工资/当月岗位工资:/</p>
            </div>
        </div>
        <div class="particulars-Jin">
            <p style="font-weight: 600;">津贴:</p>
            <div class="particulars-Jin-box">
                <div>
                    <p>津贴类型</p>
                    <div>交通补贴</div>
                    <div>午餐补助</div>
                </div>
                <div>
                    <p>补贴金额</p>
                    <div>{{ PartiList.transportationSubsidyAmount }}</div>
                    <div>{{ PartiList.lunchAllowanceAmount }}</div>
                </div>
                <div>
                    <p>津贴类型</p>
                    <div>通讯补贴</div>
                    <div>住房补贴</div>
                </div>
                <div>
                    <p>津贴类型</p>
                    <div>{{ PartiList.communicationSubsidyAmount }}</div>
                    <div>{{ PartiList.housingSubsidyAmount }}</div>
                </div>
            </div>
        </div>

        <div class="particulars-Jin">
            <p style="font-weight: 600;margin: 20px 0; display: inline-block;">津贴:</p>
            <div style="display: inline-block; margin-left: 60px;">
                <span>企业 --</span>
                <span style="margin-left: 150px;">个人 --</span>
            </div>
            <div class="particulars-Jin-box">
                <div>
                    <p>缴费项目</p>
                    <div>社保</div>
                    <div>公积金</div>
                    <div>缴费合计</div>
                </div>
                <div>
                    <p>基数</p>
                    <div>--</div>
                    <div>--</div>
                    <div>--</div>
                </div>
                <div>
                    <p>企业缴纳</p>
                    <div>--</div>
                    <div>--</div>
                    <div>--</div>
                </div>
                <div>
                    <p>个人缴纳</p>
                    <div>--</div>
                    <div>--</div>
                    <div>--</div>
                </div>
            </div>
        </div>

        <div>
            <div class="particulars-butt">
                <div class="particulars-div">
                    实际出勤天数（正式）：
                </div>
                <div>
                    <el-input v-model="mo.inp" style="width: 300px;" disabled />
                </div>
            </div>
            <div class="particulars-butt">
                <div class="particulars-div">
                    计薪天数（正式）：
                </div>
                <div>
                    <el-input v-model="mo.inp1" style="width: 300px;" disabled />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter, useRoute } from "vue-router";
import { getPayrollSettingList,getPayrollSettingAmount } from "@/api/wageApi/SalaryApi.js"
let route = useRoute()
let mo = ref({
    inp:"0",
    inp1:"0"
})
console.log(route.query.id);
let PartiList = ref({})
getPayrollSettingList().then(res => {
    console.log(res);
    PartiList.value = res.data
})
getPayrollSettingAmount(route.query.id).then(res => {
    console.log(res);
})


</script>

<style scoped lang="scss">
.particulars {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;

    .particulars-top {
        height: 123px;
        display: flex;

        justify-content: flex-start;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        p {

            span {
                font-size: 10px;
                color: #fff;
                background-color: #f56c6c;
                padding: 5px 10px;
                border-radius: 5px;
            }
        }
    }
}

.particulars-Jin {
    .particulars-Jin-box {
        padding-top: 20px;
        background-color: #f9f9f9;
        display: flex;
        padding-bottom: 20px;
        justify-content: space-around;

        div {
            p {
                font-weight: 600;
            }

            div {
                margin: 5px 0;
            }
        }

    }
}

.particulars-butt {
    display: flex;
    margin-top: 30px;

    .particulars-div {

        width: 200px;
        font-size: 16px;
        font-weight: 600;
        color: #606266;
    }
}
</style>